<template>
  <view class="booth-components">
    <view class="left-content">
      <view class="top-content">
        <view class="content-item" v-for="item in 3" :key="item">
          <view class="item-top"
            >¥
            <text class="price">15</text>
          </view>
          <view class="item-bottom">满50可用</view>
        </view>
      </view>
      <view class="bottom-content">
        <text class="iconfont icon-weibiaoti--15"></text>
        <text>美妆个护补贴 每个订单限用1张补贴券，先部分商品可用</text>
      </view>
    </view>
    <view class="right-content">
      <view class="right-top">
        <view class="left-text">美妆券包</view>
        <text class="right-text">
          <text class="price">150</text>
          <text>元</text>
        </text>
      </view>
      <view class="right-bottom"> 立抢 </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {
    imageUrl: {
      type: String,
      default: "/static/common/weipinhui/banner001.png",
    },
  },
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.booth-components {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #ff0777;
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 15rpx;
  padding-bottom: 10rpx;
  .left-content {
    flex: 1;
    .top-content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .content-item {
        position: relative;
        margin: 0 6rpx;
        border-radius: 15rpx;
        flex: 1;
        background: #fff;
        padding: 6rpx 0;
        z-index: 9;
        &::after,
        &::before {
          content: "+";
          text-align: center;
          border-radius: 50%;
          line-height: 36rpx;
          position: absolute;
          width: 36rpx;
          height: 36rpx;
          right: -24rpx;
          top: 54rpx;
          color: #fff;
          background: #ff0777;
        }
        &::before {
          left: -24rpx;
        }
        &:first-child {
          z-index: 7;
          &::after,
          &::before {
            content: "";
            line-height: 20rpx;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            right: -10rpx;
            top: 62rpx;
            background: #ff0777;
          }
          &::before {
            left: -10rpx;
          }
        }
        &:last-child {
          z-index: 7;
          &::after,
          &::before {
            content: "";
            line-height: 20rpx;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            right: -10rpx;
            top: 62rpx;
            background: #ff0777;
          }
          &::before {
            left: -10rpx;
          }
        }
        .item-top {
          text-align: center;
          color: #ff0777;
          font-size: 18rpx;
          .price {
            font-size: 50rpx;
            font-weight: 700;
          }
        }
        .item-bottom {
          border-top: 1rpx solid #eee;
          text-align: center;
          color: #777;
          font-size: 22rpx;
        }
      }
    }
    .bottom-content {
      font-size: 18rpx;
      color: #fff;
      display: flex;
      align-items: center;
      padding-left: 4rpx;
      margin-top: 8rpx;
      letter-spacing: -0.5px;
      .icon-weibiaoti--15 {
        font-size: 20rpx;
        margin-right: 4rpx;
      }
    }
  }
  .right-content {
    margin-left: 10rpx;
    width: 220rpx;
    display: flex;
    flex-direction: column;
    .right-top {
      display: flex;
      justify-content: space-between;
      align-items: start;
      color: #fff;
      .left-text {
        flex: 1;
        font-size: 30rpx;
        line-height: 34rpx;
        // letter-spacing: -2px;
      }
      .right-text {
        width: 160rpx;
        font-size: 24rpx;
        font-weight: 700;
        .price {
          font-size: 80rpx;
          letter-spacing: -2px;
          line-height: 68rpx;
        }
      }
    }
    .right-bottom {
      flex: 1;
      margin: 2rpx 0;
      background: #ffe678;
      color: #ff0777;
      width: 100%;
      font-size: 36rpx;
      font-weight: 700;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      border-radius: 20rpx;
    }
  }
}
</style>
